
<!doctype html>
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>积案进展</title>

<link href="/jiannew/css/wstyle.css" rel="stylesheet" type="text/css" />
<link href="/jiannew/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="/layui/layui.all.js" charset="utf-8"></script>
<script src="/jiannew/jquery-1.9.1.min.js"></script>
	<script src="/js/core.util.js"></script>
<script src="/jiannew/parallax.js"></script>
    <script src="/jiannew/jiannew.js"></script>
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->
<!--[if IE 6]>
<script type="text/javascript">
 DD_belatedPNG.fix("img");
</script>
<![endif]-->

</head>
<body>
<div class="wrapHeader">
	<div class="header">
		
		<ul class="nav" style='margin-left: 200px;'>
			<li><a href="javascript:void(0)" class="cur">清理率图</a></li>
			<li><a href="javascript:void(0)">清理进度图</a></li>
			<li><a href="javascript:void(0)">分局统计表</a></li>
			<li><a href="javascript:void(0)">按月进展表</a></li>
			<li><a href="javascript:void(0)">案件耗时图</a></li>

						
		</ul>
	</div>
</div>

<ul class="fixedNav">
	<li class="cur">
		<em class="icon"></em>
		<span class="txt">清理率图</span>
	</li>
	<li>
		<em class="icon"></em>
		<span class="txt">清理进度图</span>
	</li>
	<li>
		<em class="icon"></em>
		<span class="txt">分局统计表</span>
	</li>
	<li>
		<em class="icon"></em>
		<span class="txt">按月进展表</span>
	</li>
	<li>
		<em class="icon"></em>
		<span class="txt">案件耗时图</span>
	</li>
	
</ul>
<div class="wrapBox" id="wrapBox">
	<div class="box b1_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box1_bg zIndex40"><img src="/jiannew/img/b1_bg.jpg" data-src="/jiannew/img/b1_bg.jpg" alt=""></div>
		<div class="box_fixed b1_fixed" >
			  <div  id="qllt" style="left:200px;margin:auto;width:80%;height:100%"></div>

  
		</div>

	</div>
	<div class="box b2_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box2_bg"><img src="" data-src="" alt=""></div>
		<div class="box_fixed b2_fixed">
			
		</div>
	</div>
	<div class="box b3_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box3_bg"><img src="" data-src="/jiannew/img/b3_bg.jpg" alt=""></div>
		<div class="box_fixed b3_fixed">
			<div  id="jaqljdt" style="left:200px;margin:auto;width:80%;height:100%"></div>
		</div>
	</div>
	<div class="box b4_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box4_bg"><img src="" data-src="/jiannew/img/b4_bg.jpg" alt=""></div>
		<div class="box_fixed b4_fixed">
			<div   style="left:200px;margin:auto;width:80%;height:100%">

  <table class="table table-bordered">
              <thead>
                <tr>
                  <th rowspan="2">单位</th>
                  <th colspan="6">检查环节</th>
                  <th colspan="5">审理环节</th>
		<th colspan="5">执行环节</th>
		<th colspan="5">总计</th>
		<th rowspan="2">查补</th>
		<th rowspan="2">入库</th>
                </tr>
                <tr>
               	 	<th >总数</th>
                	<th >查结</th>
    			<th >终结</th>
    			<th>撤销</th>
    			<th>办结</th>
    			<th>剩余</th>

    			<th >总数</th>
                	<th >转入</th>
    			<th >审结</th>
    			<th>办结</th>
    			<th>剩余</th>

			<th >总数</th>
                	<th >转入</th>
    			<th >完毕</th>
    			<th>办结</th>
    			<th>剩余</th>

			<th >总数</th>
                	<th >办结</th>
    			<th >结案</th>
    			<th>剩余</th>
    			<th>清理率</th>

                </tr>
              </thead>
              <tbody id="fjtjb_tbody">
               <tr>
    <td>稽查局</td>
	<td style="color:#000;"><a   href="javascript:void(0);" ><p color="">7</p></a></td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
      <tr>
    <td >稽查一局</td>
		  <td style="color:#000;"><a   href="javascript:void(0);" ><p color="">7</p></a></td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
    <tr>
    <td >稽查二局</td>
		<td style="color:#000;"><a   href="javascript:void(0);" ><p color="">7</p></a></td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
    <tr>
    <td >稽查三局</td>
		<td style="color:#000;"><a   href="javascript:void(0);" ><p color="">7</p></a></td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
    <tr>
    <td >合计</td>
		<td style="color:#000;"><a   href="javascript:void(0);" ><p color="">7</p></a></td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
<td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
              </tbody>
            </table>
</div>
		</div>
	</div>
	<div class="box b5_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box5_bg"><img src="" data-src="/jiannew/img/b5_bg.jpg" alt=""></div>
		<div class="box_fixed b5_fixed">
			<div   style="left:200px;margin:auto;width:80%;height:100%">

  <table class="table table-bordered" id="ayjzb">
              <thead>
                <tr>
                  <th rowspan="2">月份</th>
		<th colspan="3">案件所在环节</th>
		<th colspan="4">清理情况</th>
                </tr>
                <tr>
		<th>检查</th>
		<th >审理</th>
		<th >执行</th>
<th >撤销</th>
<th >办结</th>
<th >结案</th>
<th >清理率</th>
                </tr>
              </thead>
              <tbody id="ayjzb_tbody">
<tr><td>一月</td>
			<td>157</td>
			<td >462</td>
				<td >67</td>
        	 		<td >0</td>
                		<td >22</td>
    				<td >22</td>
                		<td >10%</td>
                </tr>
              </tbody>
  </table>
</div>

		</div>
	</div>
	<div class="box b6_bg">
		<div class="load">
			<p><img src="/jiannew/img/loading.gif" alt=""></p>
			<div class="load_bg"></div>
		</div>
		<div class="box_bg box6_bg"><img src="" data-src="/jiannew/img/b6_bg.jpg" alt=""></div>
		<div class="box_fixed b6_fixed">

			<div  id="ajhst" style="left:200px;margin:auto;width:80%;height:90%"></div>
<!--			<div style="left:200px;margin:auto;width:80%;height:90%" id="dituContent">-->
<!--					<h1><button class="btn btn-primary">全部</button></h1>-->
<!--					</div>-->

		</div>
		</div>
	</div>
<script>
//document.body.style.overflow = 'hidden';
var ie6 = !-[1,]&&!window.XMLHttpRequest;
ie6 || loadImg.init();
</script>
<script type="text/javascript" src="/jiannew/echarts.min.js"></script>
  <script type="text/javascript">
	  //清理率图
    var dom = document.getElementById('qllt');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    // There should not be negative values in rawData
var dataData={}
const rawData = [
  [67, 19, 40, 7, 1],
  [703, 128, 259, 305, 11]
];
const part =['全市', '三局', '二局', '一局', '稽查局'];
part.forEach((item,i)=>{
        //将部门循环
          let arr = []
          let all =0;
          for (let j = 0; j < rawData.length; j++) {
            arr.push(rawData[j][i])
            all=rawData[j][i]+all;
            //把每个横向数组的数据竖向取值变成一个数组
          }
           arr.push(all)
          dataData[item] = arr
          //把部门每一项item当做一个动态key，将计算好的数据当做value循环插入进xxx这个数组里；等于将部门和数据关联成key和value的形式
        })


const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};
const gridWidth = myChart.getWidth() - grid.left - grid.right;
const gridHeight = myChart.getHeight() - grid.top - grid.bottom;
const categoryWidth = gridWidth / rawData[0].length;
const barWidth = categoryWidth * 0.6;
const barPadding = (categoryWidth - barWidth) / 2;
const series = [
  '已清理',
  '未清理'
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      formatter: (params) => sid<=0?Math.round(params.value * 10000) / 100 + '%':Math.round(params.value * 10000) / 100 + '%'
    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});
const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];

option = {
   tooltip: { //弹窗tooltip内展示的内容和样式
        trigger: 'axis',
        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' 或'shadow'
        },
        backgroundColor:"rgba(255, 255, 255, 0.93)",//弹窗背景色
        extraCssText:'box-shadow:0 0 0',//设置弹窗的阴影
    formatter: function (params) {//弹窗内容
            //弹窗里圆点的对应的样式，用模板字符串的方式
            let dotColor = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[0].color+'"></span>'
            let dotColor2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[1].color+'"></span>'
           //弹窗里的内容+样式
            return '<span style="font-size:14px;font-weight: 600;color: #20253B">'+params[0].axisValue +'</span>'+ '<br>' +
                   dotColor + '<span style="color: #20253B">'+ params[0].seriesName +'</span>'+'：'+dataData[params[0].axisValue][0] + " " +''+ '<br>' +
                   dotColor2 +'<span style="color: #20253B">'+ params[1].seriesName +'</span>'+'：'+dataData[params[0].axisValue][1] + " " +''  + '<br>' +
                   dotColor2 +'<span style="color: #20253B">合计</span>'+'：'+dataData[params[0].axisValue][2]+ " " +''  + '<br>'
          }
},
  legend: {
    selectedMode: false
  },
  grid,
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['全市', '三局', '二局', '一局', '稽查局']
  },
  series
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
<script type="text/javascript">
	//积案清理进度图
    var dom2 = document.getElementById('jaqljdt');
    var myChart2 = echarts.init(dom2, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option2;

    option2 = {
  title: {
    text: '积案清理进度图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['未清理', '已清理', '预计']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
   data:  ['0101', '0131', '0229', '0331', '0430', '0531', '0630', '0731', '0831', '0930', '1031', '1130', '1231']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '未清理',
      type: 'line',
label: {
        show: true,
        position: 'top'
      },
      data: [770, 670, 560, 470, 390, 280, 250, 210, 160,110,80,20,0]
    },
    {
      name: '已清理',
      type: 'line',
label: {
        show: true,
        position: 'top'
      },
      data: [0, 100, 110, 300,380, '-', '-', '-', '-', '-', '-', '-', '-']
    },
    {
      name: '预计',
      type: 'line',
label: {
        show: true,
        position: 'top'
      },
      data: ['-', '-', '-', '-',380,490,520,560,610,660,690,750,770]
    }
  ]
};

    if (option2 && typeof option2 === 'object') {
      myChart2.setOption(option2);
    }

    window.addEventListener('resize', myChart2.resize);
  </script>
</body>
</html>
